<template>
  <div class="bed-selection-container">
    <div class="bed-grid">
      <el-button 
        v-for="bed in beds" 
        :key="bed.id"
        class="bed-button"
        @click="selectBed(bed)">
        {{ bed.bedCode }}床 {{ bed.patientName }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/api/http';

const router = useRouter();

interface Bed {
  id: number;
  bedCode: string;
  patientName: string;
  patientCode: string;
}

const beds = ref<Bed[]>([]);

// 获取床位数据
const fetchBeds = async () => {
    const response = await http.get('/api/DoctorManage/GetPatients');
    if (response && response.data) {
      beds.value = response.data.map((patient: any) => ({
        id: patient.id,
        bedCode: patient.bedCode || '未知',
        patientName: patient.name || '未知',
        patientCode: patient.patientCode || '未知'
      }));
    }
};

const selectBed = (bed: Bed) => {
  // 导航到病人记录页面
  router.push({
    path: "/PatientRecord",
    query: {
      patientCode: bed.patientCode
    }
  });
};

// 组件挂载时获取数据
onMounted(() => {
  fetchBeds();
});
</script>

<style scoped>
.bed-selection-container {
  max-width: 1000px;
  margin: 100px auto;
  padding: 20px;
}

.bed-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  justify-items: center;
}

.bed-button {
  width: 120px;
  height: 50px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: normal;
  border: 1px solid #dcdfe6;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1200px) {
  .bed-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .bed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
